<style scoped>
</style>
<!-- 编辑页面 SEO 设置的弹窗 -->
<template>
  <div class="host-robots-dialog" v-loading="loading">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="960px" @click="close">
      <p> 通过访问 /robots.txt 查看内容，默认域名的内容为限制抓取，且固定不可改变！这里设置的内容均在绑定域名下访问实现！
      </p>
      <p style="text-align: right;">
        <a @click="clickDefault"> 通用 </a>
        <a @click="clickNone" style="margin-left: 12px;"> 限制抓取 </a>
      </p>
      <div>
        <ACEDefault ref="aceCoding" mode="text" :minLines="10" :maxLines="20" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="warning" size="small" @click="clear()">清 空</el-button>
        <el-button type="primary" size="small" @click="onSubmit()">保 存</el-button>
        <el-button type="success" size="small" @click="onSubmitAndClose()">保存并关闭</el-button>
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ACEDefault from '@/components/common/ace/Default.vue'
export default {
  data () {
    return {
      title: '',
      dialogFormVisible: false,
      loading: false
    }
  },
  methods: {
    clickDefault () {
      let content = 'User-Agent:  *' + '\n' + 'Allow:  /'
      this.$refs['aceCoding'].setValue(content)
      this.$refs['aceCoding'].editor().moveCursorTo(0, 0)
    },
    clickNone () {
      let content = 'User-Agent:  *' + '\n' + 'Disallow:  /'
      this.$refs['aceCoding'].setValue(content)
      this.$refs['aceCoding'].editor().moveCursorTo(0, 0)
    },
    show () {
      // 初始化数据
      this.dialogFormVisible = true
      // 请求后台获取数据
      this.$nextTick(() => {
        this.$refs['aceCoding'].created()
        this.$refs['aceCoding'].setValue('')
      })
      this.loading = true
      this.$post('/host/robots/info', null).then(response => {
        if (response) {
          this.$refs['aceCoding'].setValue(response)
        } else {
          this.$refs['aceCoding'].setValue('')
        }
        this.$refs['aceCoding'].editor().moveCursorTo(0, 0)
        this.$refs['aceCoding'].loaded()
        this.loading = false
      })
    },
    clear () {
      this.$refs['aceCoding'].setValue('')
      this.$refs['aceCoding'].editor().moveCursorTo(0, 0)
    },
    close () { },
    onSubmit (callback) {
      let robots = this.$refs['aceCoding'].getValue()
      if (robots.length > 1024) {
        this.$message.error('robots 内容不能大于 1024 个字符！')
        return
      }
      // 提交表单
      this.loading = true
      this.$post('/seo/robots/update', { robots: robots }).then(() => {
        if (typeof callback === 'function') {
          callback()
        }
        this.loading = false
      })
    },
    onSubmitAndClose () {
      this.onSubmit(() => {
        this.dialogFormVisible = false
      })
    }
  },
  components: {
    ACEDefault
  }
}

</script>
